import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Card,
  Select,
  Button,
  Table,
  message,
  notification,
  Tabs,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

import styles from './TableList.less';
import { isNull } from 'util';

const { Option } = Select;

@connect(({ cansai, loading }) => ({
  cansai,
  loading: loading.models.cansai,
}))
export default class Cansai extends PureComponent {
  state = {
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch, location, cansai } = this.props;
    const pathArray = location.pathname.split('/');
    const id = pathArray[3];
    const curZubie = cansai.curZubie
    this.setState({
      id,
      curZubie
    });
    dispatch({
      type: 'gameList/findById',
      payload: id,
      callback: () => {
        dispatch({
          type: 'cansai/queryAllZubieForGame',
        });
      },
    });

  }

  handleTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;

    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      headers: {
        'x-page-num': pagination.current,
        'x-page-size': pagination.pageSize
      },
      zubieCode: this.state.curZubie,
    };
    if (sorter.field) {
      params.headers['x-sort-by'] = `${sorter.field}`
      if("descend" === sorter.order){
        params.headers['x-order'] = 'desc';
      }else{
        params.headers['x-order'] = 'asc';
      }
      
    }

    this.props.dispatch({
      type: 'cansai/querySignListForZubie',
      payload: params,
    });
  };

  downloadCurrent = () => {
    this.state.curZubie &&
      window.open('/bgms/gameInfo/downloadGongshi/' + this.state.curZubie, 'GET');
  };

  downloadAll = () => {
    window.open('/bgms/gameInfo/downloadGongshi/all', 'GET');
  };

  convertProjectCode = key => {
    switch (key) {
      case 'MS':
        return '男单';
      case 'WS':
        return '女单';
      case 'MD':
        return '男双';
      case 'WD':
        return '女双';
      case 'HD':
        return '混双';
      case 'MT':
        return '男子团体';
      case 'WT':
        return '女子团体';
      case 'HT':
        return '男女混合团体';
      default:
        return '未知类型比赛';
    }
  };

  onSelectZubie = value => {
    this.setState({
      curZubie: value,
    });
    this.props.dispatch({
      type: 'cansai/changeState',
      payload: {
        curZubie: value,
      },
    });
    const params = {
      headers: {
        'x-page-num': 1,
        'x-page-size': 20
      },
      zubieCode: value,
    };
    this.props.dispatch({
      type: 'cansai/querySignListForZubie',
      payload: params,
    });
  };

  renderForm = (zubieCode) => {
    const { zubieList } = this.props.cansai;

    return <div style={{width:200}}>
      <Select placeholder="未选择" style={{ width: '100%' }} defaultValue={zubieCode} onChange={this.onSelectZubie}>
        {zubieList.map(element => element.enabled && (
          <Option key={'OP' + element.code} value={element.code}>
            {this.convertProjectCode(element.projectCode) + ' - ' + element.zubieName}
          </Option>
        ))}
      </Select></div>
  }

  renderButton() {
    return <div className={styles.tableListOperator}>
    <Button type="primary" style={{ marginLeft: 8 }}>
      结束报名
    </Button>
    <Button type="primary" onClick={() => this.downloadCurrent()} style={{ marginLeft: 8 }}>
      下载当前组别公示
    </Button>

    <Button type="primary" onClick={() => this.downloadAll()} style={{ marginLeft: 8 }}>
      下载全部组别公示
    </Button>

  </div>
  }

  render() {
    const { cansai: { zubieCansaiList, curZubie }, loading } = this.props;
    const {pagination,list} = zubieCansaiList;
    const columns = [
      {
        title: '序号',
        dataIndex: 'seq',
        width:150,
        sorter: true,
        align: 'right',
      },
      {
        title: '所属团队',
        dataIndex: 'team',
      },
      {
        title: '运动员',
        dataIndex: 'athleteList',
        render: value =>
          value && <span>{value.map(element => <span key={`athlete${element.id}`}>{element.userName}, </span>)}</span>,
      },
    ];

    return (
      <PageHeaderLayout>
        <Card title={this.renderForm(curZubie)} extra={this.renderButton()}>
          <div className={styles.tableList}>
            <Table
              loading={loading}
              rowKey={record => record.id}
              dataSource={list}
              columns={columns}
              pagination={pagination}
              onChange={this.handleTableChange}
            />
            
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
